<template>
  <!-- 登录 -->
  <div class="ipage ipage-logining" v-if="!shouldRegister">
    欢迎
  </div>
  <!-- 注册 -->
  <div class="ipage ipage-login" v-else>
    <!-- 标题 -->
    <h1 class="lg-title">必须实名认证</h1>
    <h3 class="lg-sub-title">真实填写信息</h3>
    <!-- 登录信息 -->
    <div class="login-form">
      <LoginInput
        icon="src/assets/img/name.png"
        v-model:value="name" 
        placeholder="姓名"></LoginInput>
      <LoginInput
        icon="src/assets/img/xuelino.png"
        v-model:value="education"
        placeholder="学历"></LoginInput>
      <LoginInput
        icon="src/assets/img/body.png"
        v-model:value="height" 
        placeholder="身高"></LoginInput>
      <LoginInput
        icon="src/assets/img/qianno.png"
        v-model:value="income" 
        placeholder="收入"></LoginInput>
      <LoginInput
        icon="src/assets/img/school.png"
        v-model:value="school"
        placeholder="大学"></LoginInput>
      <LoginInput
        icon="src/assets/img/houseno.png"
        v-model:value="house"
        placeholder="房子（几套）"></LoginInput>
    </div>
    <!-- 图片上传 -->
    <div class="upload-area">
      <div>
        <Uploader v-for="pic, i in pics" v-model:value="pics[i]" />
        <Uploader title="上传" v-model:value="uploadingPic" v-if="pics.length < 4" />
      </div>
      <h5 style="font-weight: normal">上传身份证和学历证明</h5>
    </div>
    <!-- 注册 -->
    <div class="login-ready">
      <div class="slog">准备好了吗？<span class="start">开始吧</span></div>
      <div class="spacer"></div>
      <StartButton @click="login" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, watch } from 'vue'
import LoginInput from '@/components/pages/login/LoginInput.vue'
import Uploader from '@/components/pages/login/Uploader.vue';
import StartButton from '@/components/pages/login/StartButton.vue';
import { fetchUserInfo, SysState } from '@/store/sys';

export default defineComponent({
  components: {
    LoginInput,
    Uploader,
    StartButton
  },
  setup() {
    /** 是否已注册 */
    const shouldRegister = ref(false);
    const loginFormData = reactive({
      name: '',
      education: '',
      height: '',
      income: '',
      school: '',
      house: '',
      pics: [] as string[]
    });

    const uploadingPic = ref('');

    watch(uploadingPic, (v) => {
      if (v) {
        loginFormData.pics.push(v);
        uploadingPic.value = ''
      }
    });

    return {
      ...toRefs(loginFormData),
      uploadingPic,
      shouldRegister,
    }
  },
  async mounted() {
    // TODO: 获取用户信息，如果已注册，跳转首页，
    // 如果没有, 就注册
    const userInfo = await fetchUserInfo()
      .catch(err => {
        // TODO: 报错
        console.log(err);
        return null
      });
    
    if (userInfo) {
      this.$router.push('/home')
    } else {
      this.shouldRegister = true;
    }
  },  
  methods: {
    login() {
      SysState.userInfo = {
        name: '张三',
        age: 26,
        gender: 1
      }
      alert('登录成功');
      // 跳转
      this.$router.push('/home')
    },
  }
})
</script>


<style lang="stylus" scoped>
@import '../styles/mixin.styl'
.ipage-logining
  Flex(row, center, center)
  min-height 100vh
  font-size .48rem

.ipage-login
  padding .8rem .8rem
  // padding-top .8rem
  .lg-title
    font-size .44rem
    font-family 'Poppins'
    font-weight normal
    color #181D2D
  .lg-sub-title
    margin .48rem 0 0 0 
    font-size .28rem
    font-weight normal
    color #AAAAAA
  .login-form
    margin-top .4rem
  .upload-area
    font-size .24rem
  .login-ready
    Flex(row, flex-start, center)
    // margin-top .2rem
    font-size .28rem
    .slog
      color #AAAAAA
      margin-right .2rem
    .start
      color #666
</style>